<template>
  <div>
    <el-button size="mini" type="success" @click="add_user">新增用户</el-button>
    <div style="position: absolute; top:50px;left: 20px;">
      <div style="width: 200px;float: left;margin-left: 20px;">
        <el-input placeholder="请输入用户名查询" size="mini" v-model="obj1.username">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>

      </div>
      <div style="float: left;margin-left: 5px;">
        <el-button size="mini" type="primary" @click="query">查询</el-button>
      </div>
      <div style="float: right; margin-left: 20px;">
        <el-button type="success" size="mini" @click="exportExcel()">导出<i class="el-icon-download el-icon--right"></i>
        </el-button>
      </div>
    </div>
    <div style="margin-top: 50px;">
      <el-table :data="userList" border style="width: 100%" id="user_data">
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="telephone" label="电话">
        </el-table-column>
        <el-table-column prop="nation" label="身份">
          <!-- <template v-slot='scope'>
            <el-tag type="danger" v-if="scope.row.nation==='超级管理员'" effect="dark">{{scope.row.nation}}</el-tag>
            <el-tag type="warning" v-else-if="scope.row.nation==='管理员'" effect="dark">{{scope.row.nation}}</el-tag>
            <el-tag type="success" v-else effect="dark">{{scope.row.nation}}</el-tag>
          </template> -->
        </el-table-column>
        <el-table-column prop="autograph" label="所属部门">
          <template v-slot='scope'>
            <el-tag type="warning" v-if="scope.row.autograph==='信息技术部'">{{scope.row.autograph}}</el-tag>
            <el-tag type="success" v-else-if="scope.row.autograph==='文员部'">{{scope.row.autograph}}</el-tag>
            <el-tag type="danger" v-else>{{scope.row.autograph}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="是否禁用">
          <template v-slot='scope'>
            <el-switch v-model="scope.row.status" active-value='true' inactive-value='false' active-color="#13ce66"
              inactive-color="#ccc" @change='test(scope.row)'>
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template v-slot='scope'>
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit_user(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-share" size="mini"
              @click="privilege(scope.row.idCard,scope.row.nation)"></el-button>
            <el-button type="warning" icon="el-icon-delete" size="mini" @click="delete_user(scope.row.id)"></el-button>
          </template>
        </el-table-column>


      </el-table>

      <div>
        <el-dialog title="该用户权限如下：" :visible.sync="dialogVisible" width="30%">
          <el-tree :data="priAll" show-checkbox node-key="id" :default-expanded-keys="[0, 5]"
            :default-checked-keys="[80,76,74,78]" :props="defaultProps" :default-expand-all="true">
          </el-tree>

        </el-dialog>
      </div>
      <div>
        <el-dialog title="该用户权限如下：" :visible.sync="dialogVisible_other" width="30%">
          <el-tag>{{privilegeList}}</el-tag>
        </el-dialog>
      </div>

      <div>
        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="dialog_user" width="50%">
          <el-form :model="form_user">
            <el-form-item label="用户名" :label-width="formLabelWidth_user">
              <el-input v-model="form_user.username"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth_user">
              <el-input v-model="form_user.telephone"></el-input>
            </el-form-item>
            <el-form-item label="身份" :label-width="formLabelWidth_user">
              <el-input v-model="form_user.nation"></el-input>
            </el-form-item>
            <el-form-item label="所属部门" :label-width="formLabelWidth_user">
              <el-input v-model="form_user.autograph"></el-input>
            </el-form-item>
            <el-form-item label="是否禁用" :label-width="formLabelWidth_user">
              <el-input v-model="form_user.status"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialog_user= false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>

  </div>
</template>
<script>
  import {
    mapActions,
    mapState
  } from 'vuex'
  import XLSX from 'xlsx'
  import FileSaver from 'file-saver'
  export default {
    data() {
      return {
        search: '',
        obj: {},
        rowVal: {},
        dialog_user: false,
        formLabelWidth_user: '120px',
        form_user: {},
        obj1: {
          page: 1,
          pageSize: 10,
        },
        title: '新增用户信息',
        bumen: ['信息技术部', '文员部', '人力资源部'],
        dialogVisible: false,
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        dialogVisible_other: false
      }
    },
    watch: {
      obj1: {
        handler: function () {
          this.page_query(this.obj1)
        },
        deep: true
      }
    },
    computed: {
      ...mapState('wangqiunan', ['userList', 'privilegeList', 'priAll']),
    },
    methods: {
      privilege(id, man) {
        var obj_pri = {
          id: id
        }

        if (man == '超级管理员') {
          this.dialogVisible = true
          this.privilege_findAll()
        } else {

          this.privilege_query(obj_pri);
          this.dialogVisible_other = true;
        }
      },
      test(val) {
        this.saveU(val).then(() => {
          this.findAll_user();
          this.$message({
            type: 'success',
            message: '用户状态更新成功'
          });

        })
      },
      query() {
        this.page_query(this.obj1)
      },
      add_user() {
        this.form_user = {}
        this.dialog_user = true
        this.title = '新增用户'
      },

      ...mapActions('wangqiunan', ['findAll_user', 'saveU', 'deleteById', "page_query", 'privilege_query',
        'privilege_findAll'
      ]),
      edit_user(val) {
        this.title = '修改用户信息'
        // console.log(val, '=========');
        this.dialog_user = true;
        this.form_user = JSON.parse(JSON.stringify(val));
      },
      save() {
        this.saveU(this.form_user).then(() => {
          this.dialog_user = false;
          this.findAll_user();
          this.form_user = {};
        })
      },
      delete_user(id) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var obj_delete = {
            id: id
          }
          this.deleteById(obj_delete).then(() => {
            this.$message({
              showClose: true,
              message: '删除成功！',
              type: 'success'
            });
            this.findAll_user()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      exportExcel() {
        this.$confirm("是否确认导出当前用户列表?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then((response) => {
            var wb = XLSX.utils.table_to_book(
              document.querySelector("#user_data")
            );
            var wbout = XLSX.write(wb, {
              bookType: "xlsx",
              bookSST: true,
              type: "array",
            });
            try {
              FileSaver.saveAs(
                new Blob([wbout], {
                  type: "application/octet-stream"
                }),
                "用户列表.xlsx"
              );
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
          });


      },

    },
    created() {
      this.findAll_user()

    }
  }

</script>
<style>

</style>
